<wide-header-page title="{{'Order Summary' | translate}}" hideBackButton="true">
  <ion-buttons right>
    <button clear wide-header-bar-button (click)="cancelOrder()" ion-button>
      <span translate>Cancel</span>
    </button>
  </ion-buttons>
  <div page-content>
    <ion-list class="bp-list">
      <div class="exchange-container" (click)="openAmountModal()">
        <div class="item-label card-title" translate>Amount</div>
        <ion-item>
          <button ion-button class="select-wallet-button selected">
            <span class="note-container ellipsis">{{currency}}</span>
          </button>
          <ion-note item-end>
            <ion-row align-items-center>
              <div class="amount">{{amount | number : getDigitsInfo(currency)}}</div>
            </ion-row>
          </ion-note>
        </ion-item>
      </div>

      <div class="exchange-container" (click)="openCoinAndWalletSelectorModal()">
        <div class="item-label card-title" translate>Deposit to</div>
        <ion-item>
          <div *ngIf="wallet">
            <button ion-button class="select-wallet-button selected">
              <ion-icon *ngIf="currencyProvider.COIN[wallet.coin | uppercase]" [ngClass]="{'testnet': wallet.network === 'testnet'}" class="item-img" item-start>
                <img src="assets/img/currencies/{{wallet.coin.toLowerCase()}}.svg" />
              </ion-icon>
              <ion-icon *ngIf="!currencyProvider.COIN[wallet.coin | uppercase]" class="item-img" item-start>
                <img [src]="currencyProvider.getLogoURI(wallet.coin.toLowerCase())" (error)="currencyProvider.defaultLogoURI(img)" #img/>
              </ion-icon>
              <span class="note-container ellipsis">{{wallet?.name}}</span>
              <ion-icon [name]="isOpenSelector.destination ? 'ios-arrow-up-outline' : 'ios-arrow-down-outline'"></ion-icon>
            </button>
          </div>
          <div *ngIf="!wallet">
            <button ion-button class="select-wallet-button">
              <span>{{'Select a Destination' | translate}}</span>
              <ion-icon [name]="isOpenSelector.destination ? 'ios-arrow-up-outline' : 'ios-arrow-down-outline'"></ion-icon>
            </button>
          </div>
        </ion-item>
      </div>

      <div class="exchange-container" (click)="openCountrySelectorModal()">
        <div class="item-label card-title" translate>Country</div>
        <ion-item>
          <div *ngIf="!selectedCountry">
            <button ion-button class="select-wallet-button">
              <span>{{'Select a Country' | translate}}</span>
              <ion-icon [name]="isOpenSelector.country ? 'ios-arrow-up-outline' : 'ios-arrow-down-outline'"></ion-icon>
            </button>
          </div>
          <div *ngIf="selectedCountry" class="main-label">{{selectedCountry?.name}}</div>
        </ion-item>
      </div>

    <div class="exchange-container" (click)="openCryptoPaymentMethodModal()">
      <div class="item-label card-title" translate>Payment Method</div>
      <ion-item>
        <div *ngIf="!paymentMethod">
          <button ion-button class="select-wallet-button">
            <span>{{'Select a Payment Method' | translate}}</span>
            <ion-icon [name]="isOpenSelector.paymentMethod ? 'ios-arrow-up-outline' : 'ios-arrow-down-outline'"></ion-icon>
          </button>
        </div>
        <div *ngIf="paymentMethod" class="main-label">{{paymentMethod?.label}}</div>
        <ion-note item-end>
          <ion-row align-items-center>
            <ion-icon class="item-img" item-start>
              <img [ngClass]="{'fix-payment-icon': paymentMethod?.method == 'applePay'}" src="{{paymentMethod?.imgSrc}}">
            </ion-icon>
          </ion-row>
        </ion-note>
      </ion-item>
    </div>

    </ion-list>

    <button ion-button class="button-standard button-primary" (click)="goToCryptoOffersPage()" [disabled]="!wallet">
      <span>{{'View Offers' | translate}}</span>
    </button>
  </div>
</wide-header-page>